<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
</head>
<body>

<h3>INDEX页面</h3>

<hr>
{% csrf_token %}
<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"><button class="cal">计算</button>

<script>

    // 传参的Ajax请求
    $(".cal").click(function () {
        var num1=$("#num1").val();
        var num2=$("#num2").val();
        $.ajax({
            url: "/cal/",
            type: "post",
            data: {
                num1:num1,
                num2:num2,
                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
            },
            success: function (response) {
                console.log(response);
                $("#ret").val(response)
            }
        })
    })
</script>

</body>
</html>
